<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>分析生命周期</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前的n值是{{n}}</h2>
        <h2 v-text="n"></h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止Vue启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        /* template: `
            <div>
                <h2>当前的n值是{{n}}</h2>
                <button @click="add">点我n+1</button>
            </div>
        `, */
        data: {
            n: 1
        },
        watch: {
            n() {
                console.log('n变了');
            }
        },
        methods: {
            add() {
                console.log('add');
                this.n++;
            },
            bye() {
                console.log('bye');
                this.$destroy();
            }
        },
        beforeCreate() {
            /* 此时:
            无法通过vm访问到data中的数据或methods中的方法 */
            console.log('beforeCreate');
            // console.log(this);
            // debugger;
        },
        created() {
            /* 此时:
            可以通过vm访问到data中的数据或methods中的方法 */
            console.log('created');
            // console.log(this);
            // debugger;
        },
        beforeMount() {
            /* 此时: 
            1. 页面中呈现的是未经Vue编译的DOM结构
            2. 所有对DOM的操作,最终都不奏效 */
            console.log('beforeMount');
            // console.log(this);
            // debugger;
        },
        mounted() {
            /* 此时: 
            1. 页面中呈现的是经过Vue编译的DOM结构
            2. 对DOM的操作均有效(尽量避免).
            至此初始化过程结束,一般在此进行:
            开启定时器,发送网络请求,订阅消息,绑定自定义事件,等初始化操作 */
            console.log('mounted', this.$el);
            console.log('mounted', this.$el instanceof HTMLElement);
            // console.log(this);
            // document.querySelector('h2').innerText = 123;
            // debugger;
        },
        beforeUpdate() {
            /* 此时: 
            数据是新的,单页面是旧的,即:页面尚未和数据保持一致 */
            console.log('beforeUpdate');
            // console.log(this.n);
            // debugger;
        },
        updated() {
            /* 此时: 
            数据是新的,单页面也是新的,即:页面和数据保持同步 */
            console.log('updated');
            // console.log(this.n);
            // debugger;
        },
        beforeDestroy() {
            /* 此时: 
            vm中所有的:data,methods,指令等等,都处于可用状态,马上要执行销毁过程.
            一般在此阶段:关闭定时器,取消订阅消息,解绑自定义事件等收尾操作 */
            console.log('beforeDestroy');
            console.log(this.n);
            this.add();
        },
        destroyed() {
            console.log('destroyed');
        },
    });
</script>

</html>